{% extends "base.html" %}
{% block content %}
<div class="row">
  <div class="col-md-8">
    <h2>Ask HealthAssist</h2>
    <p>Type your health-related questions below. This assistant provides general information only.</p>

    <div id="chatBox" class="border rounded p-3 mb-2" style="height:300px; overflow:auto;"></div>
    <div class="input-group">
      <input id="chatInput" class="form-control" placeholder="Ask about symptoms, prevention, healthy lifestyle..." />
      <button id="sendBtn" class="btn btn-primary">Send</button>
    </div>
    <small class="text-muted">Disclaimer: Not medical advice. For emergencies, contact emergency services.</small>
  </div>
  <div class="col-md-4">
    <h4>Health Articles / Services</h4>
    {% for c in contents %}
      <div class="card mb-2">
        <div class="card-body">
          <h5 class="card-title">{{ c.title }}</h5>
          <p class="card-text">{{ c.body[:150] }}...</p>
        </div>
      </div>
    {% else %}
      <p>No services yet.</p>
    {% endfor %}
  </div>
</div>
{% endblock %}